<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法的demo</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <todo-item v-for="(item, index) in groceryList" v-bind:todo="item" v-bind:todo1="index"></todo-item>
    </ul>
    <input type="text" v-model="message" />
</div>
</body>
<script>
    Vue.component('todo-item', {
        //声明模板标签的属性节点
        props: ['todo', 'todo1'],
        //展示属性节点为真实的html元素
        template: '<li>{{ todo1 }}-{{ todo.text }}</li>'
    });
    let app1 = new Vue({
        el: '#app',
        data: {
            groceryList: [
                {text: 'text1'},
                {text: 'text2'},
                {text: 'text3'}
            ],
            message: 'hello'
        },
        //watch会监听其中设置的属性, 下面的例子的意思是: 当message的值改变时, 会触发后面的函数, newValue是新的值, oldValue是旧的值.
        watch: {
            message: function (newValye, oldValue) {
                console.log('旧值为: ', oldValue, ', 新值为: ', newValye);
            }
        }
    });

</script>
</html>